<!DOCTYPE html>
<html lang="zxx">

<head>
    <title>Console</title>
    <!-- Meta tag Keywords -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8" />
    <meta name="keywords" content="" />
    <link rel="shortcut icon" type="image/x-icon" href="./images/cyclops_icon.jpg">


    <script type="text/javascript" src="http://static.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
    <script type="text/javascript" src="http://static.robotwebtools.org/roslibjs/current/roslib.min.js"></script>
    
    <script type="text/javascript" type="text/javascript">
      // Connecting to ROS
      var ros = new ROSLIB.Ros({
        url : 'ws://192.168.43.222:9090'
      });
       
      var isconected=false;
      var cmdVel = new ROSLIB.Topic({
        ros : ros,
        name : '/servo',
        messageType : 'geometry_msgs/Twist'
      });
    
      var twist = new ROSLIB.Message({
        linear : {
          x : 0.0,
          y : 0.0,
          z : 0.0
        },
        angular : {
          x : 0.0,
          y : 0.0,
          z : 0.0
        }
      });
        
      function control_move(direction){
        twist.linear.x = 90;
        twist.linear.y = 90;
        twist.linear.z = 0;
        twist.angular.x = 0;
        twist.angular.y = 0;
        twist.angular.z = 0;
        
        switch(direction){
          case 'down':
            twist.linear.x = 130;
            
            break;
          case 'center':
           
          break;
          case 'up':
            twist.linear.x = 50;
            
          break;
          case 'upr':
            twist.linear.x = 50;
            twist.linear.y = 30;
          break;
          case 'upl':
            twist.linear.x = 50;
            twist.linear.y = 150;
          break;
          case 'Rlo':
          twist.linear.y = 30;
          twist.linear.x = 130;
          break;
          case 'Llo':
          twist.linear.y = 150;
          twist.linear.x = 130;
          break;
          case 'left':
          twist.linear.y = 150;
          
          break;
          case 'right':
          twist.linear.y = 30;
          
          break;
        }
        cmdVel.publish(twist);//发布twist消息
      }
    
      var timer=null;    
      function buttonmove(){  
        var oUp=document.getElementById('up');
        var oUpl=document.getElementById('upper_left');
        var oUpr=document.getElementById('upper_right');
        var oLeft=document.getElementById('left');
        var oCenter=document.getElementById('center');
        var oRight=document.getElementById('right');  
        var oLlo=document.getElementById('left_lower');

        var oDown=document.getElementById('down');
        
        var oRlo=document.getElementById('right_lower');
             
        oUp.onmousedown=function ()
        {
            Move('up');        
        }
        oCenter.onmousedown=function ()
        {
            Move('center');        
        }
        oUpl.onmousedown=function ()
        {
            Move('upl');        
        }
        oUpr.onmousedown=function ()
        {
            Move('upr');        
        }
        oLlo.onmousedown=function ()
        {
            Move('Llo');        
        }
        oRlo.onmousedown=function ()
        {
            Move('Rlo');        
        }
        oDown.onmousedown=function ()
        {
            Move('down');        
        }
         
        oLeft.onmousedown=function ()
        {
            Move('left');        
        }
         
        oRight.onmousedown=function ()
        {
            Move('right');       
        }
    
        oUp.onmouseup=oDown.onmouseup=oLeft.onmouseup=oRight.onmouseup=function ()
        {
            MouseUp ();
        }      
      }
    
    
      
    
      var MoveTime=20;
         
      function Move (f){
        clearInterval(timer);
          
        timer=setInterval(function (){          
          control_move(f)      
        },MoveTime);
      }        
           
      function MouseUp ()
      {
          clearInterval(timer);        
      }
      
      function KeyUp(event){
          MouseUp();
      }
      window.onload=function ()
      {  
            buttonmove();                
            document.onkeyup=KeyUp;
            document.onkeydown=keymove;           
            Movebox();    
      }
      
      
     
    
    </script>

    <script>
        addEventListener("load", function() {
            setTimeout(hideURLbar, 0);
        }, false);

        function hideURLbar() {
            window.scrollTo(0, 1);
        }
    </script>
    <!-- //Meta tag Keywords -->

    <!-- Custom-Files -->
    <link rel="stylesheet" href="css/bootstrap.css">
    <!-- Bootstrap-Core-CSS -->
    <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
    <!-- Style-CSS -->
    <!-- font-awesome-icons -->
    <link href="css/font-awesome.css" rel="stylesheet">
    <!-- //font-awesome-icons -->
    <!-- /Fonts -->
    <link href="http://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900" rel="stylesheet">
    <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900" rel="stylesheet">
    <!-- //Fonts -->

</head>

<body>

    <!-- mian-content -->
    <div class="main-banner inner" id="home">
        <!-- header -->
        <header class="header">
            <div class="container-fluid px-lg-5">
                <!-- nav -->
                <nav class="py-4">
                    <div id="logo">
                       <h1> <a href="index.html">Cyclops</a></h1>
                    </div>

                    <label for="drop" class="toggle">Menu</label>
                    <input type="checkbox" id="drop" />
                    <ul class="menu mt-2">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="http://192.168.43.222:8081/">Monitor</a></li>
                        <li class="active" ><a href="gallery.html">Console</a></li>
                        <li><a href="about.html">About us</a></li>
                    </ul>
                </nav>
                <!-- //nav -->
            </div>
        </header>
        <!-- //header -->

    </div>
    <!--//main-content-->
    <!---->
   
	 <!-- portfolio -->
    <section class="portfolio py-5" id="gallery">
        <div class="container py-lg-5">
            <h3 class="tittle text-center my-lg-5 my-3">Click to adjust angle.<br><small><small><small>Attention: please MAKE SURE that the monitor and your computer are under the SAME WIFI or Hotpoint!!!</small></small></small></h3>
<!--            <div  style="position:relative;left:10%;top:15%">-->
<!--                <button type="button" calss="btn" style="background-color: #d7b5f1;width:20%;height:36px;border-radius: 0.5rem;" id = "upper_left"> upper left</button>-->
<!--            </div>-->
            <div>
                <button type="button" calss="btn" style="background-color: #d7b5f1;width:20%;height:50px;border-radius: 0.5rem;margin-left: 10%;margin-top: 2%" id = "upper_left"> upper left</button>
                <button type="button" calss="btn" style="background-color: #d7b5f1;width:20%;height:50px;border-radius: 0.5rem;margin-left: 10%;margin-top: 2%" id = "up"> up</button>
                <button type="button" calss="btn" style="background-color: #d7b5f1;width:20%;height:50px;border-radius: 0.5rem;margin-left: 10%;margin-top: 2%" id = "upper_right"> upper right</button>
                <br>
                <button type="button" calss="btn" style="background-color: #d7b5f1;width:20%;height:50px;border-radius: 0.5rem;margin-left: 10%;margin-top: 2%"  id = "left"> left</button>
                <button type="button" calss="btn" style="background-color: #d7b5f1;width:20%;height:50px;border-radius: 0.5rem;margin-left: 10%;margin-top: 2%"  id = "center"> center</button>
                <button type="button" calss="btn" style="background-color: #d7b5f1;width:20%;height:50px;border-radius: 0.5rem;margin-left: 10%;margin-top: 2%"  id = "right"> right</button>
                <br>
                <button type="button" calss="btn" style="background-color: #d7b5f1;width:20%;height:50px;border-radius: 0.5rem;margin-left: 10%;margin-top: 2%"  id = "left_lower"> left lower</button>
                <button type="button" calss="btn" style="background-color: #d7b5f1;width:20%;height:50px;border-radius: 0.5rem;margin-left: 10%;margin-top: 2%"  id = "down"> down</button>
                <button type="button" calss="btn" style="background-color: #d7b5f1;width:20%;height:50px;border-radius: 0.5rem;margin-left: 10%;margin-top: 2%"  id = "right_lower"> right lower</button>

            </div>
                
<!--                <button type="button"  id = "upper_left"> upper left</button>-->
<!--                <button type="button"  id = "up"> up</button>-->
<!--                <button type="button"  id = "upper_right"> upper right</button>-->
<!--                <br>-->
<!--                <button type="button"  id = "left"> left</button>-->
<!--                <button type="button"  id = "center"> center</button>-->
<!--                <button type="button"  id = "right"> right</button>-->
<!--                <br>-->
<!--                <button type="button"  id = "left_lower"> left lower</button>-->
<!--                <button type="button"  id = "down"> down</button>-->
<!--                <button type="button"  id = "right_lower"> right lower</button>-->

        </div>
    </section>
    <!-- popup-->
    <div id="gal1" class="pop-overlay">
        <div class="popup">
            <img src="images/g1.jpg" alt="Popup Image" class="img-fluid" />
            <p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
            <a class="close" href="#gallery">&times;</a>
        </div>
    </div>
    <!-- //popup -->
    <!-- popup-->
    <div id="gal2" class="pop-overlay">
        <div class="popup">
            <img src="images/g2.jpg" alt="Popup Image" class="img-fluid" />
            <p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
            <a class="close" href="#gallery">&times;</a>
        </div>
    </div>
    <!-- //popup -->
    <!-- popup-->
    <div id="gal3" class="pop-overlay">
        <div class="popup">
            <img src="images/g3.jpg" alt="Popup Image" class="img-fluid" />
            <p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
            <a class="close" href="#gallery">&times;</a>
        </div>
    </div>
    <!-- //popup3 -->
    <!-- popup-->
    <div id="gal4" class="pop-overlay">
        <div class="popup">
            <img src="images/g4.jpg" alt="Popup Image" class="img-fluid" />
            <p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
            <a class="close" href="#gallery">&times;</a>
        </div>
    </div>
    <!-- //popup -->
	 <div id="gal5" class="pop-overlay">
        <div class="popup">
            <img src="images/g5.jpg" alt="Popup Image" class="img-fluid" />
            <p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
            <a class="close" href="#gallery">&times;</a>
        </div>
    </div>
    <!-- //popup -->
    <!-- popup-->
    <div id="gal6" class="pop-overlay">
        <div class="popup">
            <img src="images/g6.jpg" alt="Popup Image" class="img-fluid" />
            <p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
            <a class="close" href="#gallery">&times;</a>
        </div>
    </div>
    <!-- //popup -->
    <!-- popup-->
    <div id="gal7" class="pop-overlay">
        <div class="popup">
            <img src="images/g7.jpg" alt="Popup Image" class="img-fluid" />
            <p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
            <a class="close" href="#gallery">&times;</a>
        </div>
    </div>
    <!-- //popup3 -->
    <!-- popup-->
    <div id="gal8" class="pop-overlay">
        <div class="popup">
            <img src="images/g8.jpg" alt="Popup Image" class="img-fluid" />
            <p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
            <a class="close" href="#gallery">&times;</a>
        </div>
    </div>
    <!-- //popup -->
	<!-- popup-->
    <div id="gal9" class="pop-overlay">
        <div class="popup">
            <img src="images/g9.jpg" alt="Popup Image" class="img-fluid" />
            <p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
            <a class="close" href="#gallery">&times;</a>
        </div>
    </div>
    <!-- //popup -->
    <!--//portfolio-->

   <!--footer -->
   <footer>
    <section class="footer footer_1its py-5">
        <div class="container py-md-4">
            <div class="row footer-top mb-md-5 mb-4">
                <div class="col-lg-4 col-md-6 footer-grid_section_1its">
                    <div class="footer-title-w3ls">
                        <h3>Address</h3>
                    </div>
                    <div class="footer-text">
                        <p>Address : CQU, ChongQing, China</p>
                        <p>Phone : +186 13841359579</p>
                        <p>Email : 2713721325@qq.com</a></p>
                        
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 mt-md-0 mt-4 footer-grid_section_1its">
                    <div class="footer-title-w3ls">
                        <h3>Catch On</h3>
                    </div>
                    <p>More functions are coming soon...</p>
                    
                </div>
                <div class="col-lg-4 col-md-12 mt-lg-0 mt-4 col-sm-12 footer-grid_section_1its">
                    <div class="footer-title-w3ls">
                        <h3>Pligrim</h3>
                    </div>
                    <div class="footer-text">
                        <p>Pligrim is our main webpage. Click to enter it and explore more fun!</p>
                        <ul class="social_section_1info"></ul>
                        <li class="mb-2 twitter"><a href="http://47.108.54.157:8080/hand/"><span class="fa fa-twitter mr-1"></span>Pligrim</a></li>
                    </ul>
                    </div>
                </div>
            </div>
           
            <div class="move-top-w3layouts text-center mt-3">
                <a href="#home" class="move-top"> <span class="fa fa-angle-up  mb-3" aria-hidden="true"></span></a>
            </div>

        </div>
    </section>
</footer>

    <!-- copyright -->
    <div class="cpy-right text-center py-3">
        <p class="">Copyright &copy; 2021.Pensée All rights reserved.</p>
    </div>
    <!-- //copyright -->

</body>

</html>
